<template>
  <div class="main">
    <el-container>
      <el-header>
        <div class="search">
          <el-row :gutter="20" class="search-area" style="margin-left: 20px">
            <el-col :span="6">
              <el-input
                v-model="input1"
                class="w-50 m-2"
                size="large"
                placeholder="请输入内容"
                @keyup.enter="handleSearch"
              />
            </el-col>

            <el-col :span="4">
              <el-button
                type="primary"
                class="m-2"
                size="large"
                @click="handleSearch"
              >
                <template #icon>
                  <Search />
                </template>
                搜索
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-header>

      <el-container>
        <el-main class="main-qa">
          <div v-for="index in questions" :key="index">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <div>
                  <el-avatar :src="index.avatar" />
                  <span>{{ index.nickname }}</span>
                </div>
              </div>
              <div>
                <p>
                  <strong>{{ index.title }}</strong>
                </p>
                <p>
                  {{ index.content }}
                </p>
                <div class="card-footer">
                  <span>👍 {{ index.likes }}</span>
                  <span>💬 {{ index.comments }}</span>
                  <i class="el-icon-star-off"></i>
                  <span>⭐ {{ index.stars }}</span>
                </div>
              </div>
            </el-card>
            <el-divider />
          </div>
        </el-main>

        <el-aside width="300px" class="side-qa"> </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import { onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";

const input1 = ref("");
const questions = ref([]);
const handleSearch = () => {
  console.log("Searching for:", input1.value);
  // 在这里添加你的搜索逻辑
  axios
    .post("/api/qa/Byname", {
      name: input1.value,
    }) // 修正 URL 并发送搜索参数
    .then((response) => {
      questions.value = response.data.list;
      console.log(questions.value);
    })
    .catch((error) => {
      console.error("There was an error fetching the data:", error);
    });
};

onMounted(() => {
  fetchData();
});

const fetchData = () => {
  axios
    .get("/api/qa/info")
    .then((response) => {
      console.log(response.data);
      questions.value= response.data.data.records;
      console.log(questions.value);
    })
    .catch((error) => {
      console.error("There was an error fetching the data:", error);
    });
};
</script>

<style scoped>
.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.search-area {
  margin-top: 20px;
  margin-bottom: 20px; /* 根据需要调整间距 */
}
</style>
